<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间</title>
    <style type="text/css">
        .tu1 {
            background-image: url("../rouimg/zhifu/bank1.png");
            height: 36px;
            width: 160px;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
    <script>
        var _left = 0;
        var _top = 0;

        var myTime = function () {
            var d = new Date();//表明生成了一个日期对象
            var year = d.getFullYear();
            var month = d.getMonth();//从0开始
            var date = d.getDate();
            var week = d.getDay();
            var hour = d.getHours();
            var minute = d.getMinutes();
            var second = d.getSeconds();
            var ms = d.getMilliseconds();
            var pv = document.getElementById('p1');
            pv.textContent = '今天是 : 星期' + week + ' ' + year + '年' + (month + 1) + '月' + date + '日' + hour + ':' + minute + ':' + second;

            // pv.style.left = _left++ + 'px';

            //pv.style.top = _top++ + 'px';

        };
        var _down = true;//表明往下漂浮 一个往上还是往下飘开关的作用
        var _right = true;//表明往右浮动
        var fudon = function () {
            var pv2 = document.getElementById('tu');//广告对象
            var pv2_top = parseInt(pv2.style.top);//广告对象的y坐标
            var pv2_height = 36;//广告自身的高度
            //控制台打印信息 方便调试自己的代码
            //console.debug/info (_left + ':'+ _top);

            //默认情况 广告向下漂浮
          if (_down){
             //广告的y坐标 + 自身高度 < 浏览器的文档高度-> 表明可以继续往下漂浮
             if (pv2_top +pv2_height < document.documentElement.clientHeight){
             pv2.style.top =_top++ +'px';
             console.debug(_left + ':'+ _top);
             }else {
             _down = false;//示意不能向下漂浮了->向上飘
             pv2.style.top =--_top +'px';
             }
             }else {
             if (pv2_top >=0){
             pv2.style.top =_top-- +'px';
             }else {
             _down = true;//向下飘
             pv2.style.top =_top++ +'px';
             }
             }
            var pv2_left = parseInt(pv2.style.left);
            if (_right) {
                //广告对象的y坐标
                var pv2_width = 160;
                //广告的x坐标 + 自身宽度 < 浏览器的文档宽度-> 表明可以继续往右漂浮
                if (pv2_left + pv2_width < document.documentElement.clientWidth) {
                    pv2.style.left = _left++ + 'px';
                } else {
                    _right = false;//示意不能向右漂浮了->向左飘
                    pv2.style.left = --_left + 'px';
                }
            } else {
                console.debug(pv2_left);
                if (pv2_left >= 0) {
                    pv2.style.left = _left-- + 'px';
                } else {
                    _right = true;//向you飘
                    pv2.style.left = _left++ + 'px';
                }
            }
            //console.debug(_left + ':' + _top);

        };
        window.onload = function () {
            //setInterval 按照时间 间隔来循环执行
            //参数1: 脚本内容
            //参数2: 时间单位 (ms) 1000ms = 1s
            myTime();
            window.setInterval(myTime, 100);
            //window.setInterval(fudon, 100);
            //返回一个时间执行对象
            ad_timer = window.setInterval(fudon,1);

            //做鼠标悬停
            document.getElementById('tu').onmouseover = function () {
                //清除时间对象
                window.clearInterval(ad_timer);
                this.style.cursor = 'pointer';
            };
            //鼠标离开图片
            document.getElementById('tu').onmouseout = function () {
                ad_timer = window.setInterval(fudon,1);
            }
        };
    </script>
</head>
<body>
<p id='p1' style='position:absolute;left:0;top:0;font-size:12px;border:1px solid #0b58a2;width:220px;height:20px'></p>
<div id="tu" class="tu1" style="position: absolute;left: 0;top: 0;height: 36px; width: 160px;"></div>
</body>
</html>